<template>
	<view class="page">
		<view class="title">
			<u-swiper :list="listes" mode="none" height="280" border-radius="30"></u-swiper>
		</view>
		<!-- vip服务 -->
		<view class="vip" v-for="(item,index) in vipList" :key="index" :data-c="index">
			<view class="vip-title">
				<text>{{item.title1}}</text>
				{{item.title2}}
			</view>
			<view class="vip-content flex align-items justify-between">
				<view class=" vip-item vip-left" @tap="nav(item.lefturl)" :style="{'height':index=='1'?'130rpx':'214rpx'}">
					<!-- <text style="color: #fff;">{{item.left}}</text> -->
					<view class="vip-text" v-if="item.title1=='VIP'" >
						公开课程
					</view>
				</view>
				<view class="vip-item vip-right" @tap="nav(item.righturl)" :style="{'height':index=='1'?'130rpx':'214rpx'}">
					<!-- <text style="color: #fff;">{{item.right}}</text> -->
					<view class="vip-text" v-if="item.title1=='VIP'" style="">
						币圈热点
					</view>
					<!-- <view class="go" v-if="item.title1=='新手'"></view> -->
				</view>
			</view>
		</view>
		<!-- 24小时快讯 -->
		<view class="bulletin">
			<view class="bulletin-title">
				<text>24小时</text>
				快讯
			</view>
			<view class="bulletin-content">
				<u-time-line>
						<u-time-line-item class="u-node" nodeTop="2" v-for="(item,index) in bulletinList" :key="index">
							<template v-slot:node><view  class="u-nodes"></view></template>
							<template v-slot:content>
								<view>
									<view class="u-order-title">{{item.issueTime}}</view><!-- 时间 -->
									<view class="u-order-desc">{{item.title}}</view><!-- 标题 -->
									<text class="u-text" v-if="item.content.length>='48' && !item.check" @tap="item.check=!item.check">...点击查看</text>
									<view class="u-order-time" :style="{'-webkit-line-clamp': item.check?'30':'2'}">{{item.content}}</view><!-- 内容 -->
									<!-- 分享 -->
									<!-- <view class="share">
										<image src="../../static/share1.png" mode="aspectFill"></image>
									</view> -->
								</view>
							</template>
						</u-time-line-item>
				</u-time-line>
			</u-time-line>
			<u-loadmore :status="status" />
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				vipList: [
					// {
					// 	title1: 'VIP',
					// 	title2: '服务',
					// 	left: "策略解析",
					// 	right: '量化教程',
					// 	lefturl: './analysis?type=0',
					// 	righturl: './analysis?type=1',
					// },
					{
						title1: 'VIP',
						title2: '服务',
						left: "公开课程",
						right: '币圈热点',
						lefturl: './course?type=0',
						righturl: './course?type=1',
					},
					{
						title1: '新手',
						title2: '指南',
						left: "",
						right: '',
						lefturl: './webvuew?url=https://www.jinse.com/',
						righturl:  './webvuew?url=https://www.feixiaohao.com/',
					}
				],
				bulletinList: [],//快讯
				listes: [],//banner
				page: 1,//页码
			};
		},
		onReachBottom(){//下拉
			this.page++
			this.getInformationByType()
		},
		onLoad() {
			this.getInformationByType()//快讯
			this.bannerlist()//banner
		},
		methods: {
			bannerlist(){//banner图片
				this.request('banner/list?type=2').then(res=>{
					this.listes=res.data.data
				})
			},
			getInformationByType(){
				this.status='loading'//加载更多
				this.request(`getInformationByType?pageSize=20&infoType=1&page=${this.page}`).then(res => {
					let data=res.data.data
					for(let i=0;i<data.length;i++){
						data[i].check=false
					}
					if(data.length!=0){
						this.bulletinList.push(...data)
						this.status='loadmore'
					}else{
						this.status='nomore'
					}
					
				})
			},
			nav(url) {
				// this.$Router.push({ path: '/pages/college/course'})
				uni.navigateTo({
					url: url
				})
			}
		},
	}
</script>

<style lang="scss">
	.page {
		width: 678rpx;
		margin: 0 auto;
	}
	/deep/ uni-swiper{
	  background-color:transparent !important;
	 }
.u-node {
		/deep/ .u-time-axis-node{
			position: absolute;
			    top: 6px;
			    left: -20px;
			    -webkit-transform-origin: 0;
			    transform-origin: 0;
			    transform: translateX(-50%);
			    display: flex;
			    flex-direction: row;
			    align-items: center;
			    justify-content: center;
			    z-index: 1;
			    font-size: 0px !important;
		}
		/deep/ .u-time-axis-node{
			background-color:transparent !important;
		}
		.u-nodes{
			width: 10px;
			height: 10px;
			background: #1677FF;
			border-radius: 50%;
			opacity: 1;
		}
	}
	
	.u-order-title {
		color: #666666;
		font-weight: bold;
		font-size: 24rpx;
	}
	
	.u-order-desc {
		color: #666666;
		font-weight: bold;
		font-size: 28rpx;
		margin: 8rpx 0rpx;
	}
	
	.u-order-time {
		color: #999999;
		font-size: 26rpx;
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
	}
	.share{
		@include flex;
		justify-content: flex-end;
		image{
			margin-top: 20rpx;
			width: 27rpx;
			height: 27rpx;
		}
	}
	.u-text{
		position: absolute;
		right: 0rpx;
		color: #FFB740;
		background-color: $color-bgs;
		// border: 1px solid red;
		margin-top: 35rpx;
		font-size: 24rpx;
	}
	.title {
		height: 240rpx;
		// background: linear-gradient(180deg, #8DB2FB 0%, #547BF6 100%);
		// border-radius: 16rpx;
		margin: 120rpx auto 86rpx;
	}

	.vip {
		.vip-title {
			font-size: 36rpx;
			font-family: PingFang;
			font-weight: bold;
			// color: #FFFFFF;
			position: relative;
			padding-left: 20rpx;

			text {
				color: #FE485A;
			}

			&::after {
				content: "";
				height: 40rpx;
				border: 2px solid #FE485A;
				position: absolute;
				left: 0;
				top: 0;
				border-radius: 6px;
			}
		}

		.vip-content {
			margin: 34rpx 0 50rpx;

			.vip-item {
				width: 330rpx;
				height: 214rpx;
				padding: 20rpx;
				// border: 1px solid red;
				.vip-text{
					color: #FFFFFF;
					font-weight: bold;
					font-size: 32rpx;
					// transform: scale(0.8);
					margin: 10rpx;
				}
			}

			.vip-left {
				background: url(../../static/college/vip1.png);
				background-size: 100%;
				background-repeat: no-repeat;
			}

			.vip-right {
				background: url(../../static/college/vip2.png);
				background-size: 100%;
				background-repeat: no-repeat;
			}
		}
	}

	.vip[data-c="1"] {
		.vip-left {
			padding: 20rpx;
			box-sizing: border-box;
			// height: 214rpx;
			background: url(../../static/college/date1.png);
			background-size: 100%;
			background-repeat: no-repeat;
		}

		.vip-right {
			padding: 20rpx;
			box-sizing: border-box;
			// height: 214rpx;
			background: url(../../static/college/date2.png);
			background-size: 100%;
			background-repeat: no-repeat;
		}
	}

	.vip[data-c="2"] {
		.vip-title {
			text {
				color: #1677FF;
			}

			&::after {
				border: 2px solid #1677FF;
			}
		}

		.vip-left {
			padding: 20rpx;
			box-sizing: border-box;
			height: 214rpx;
			background: url(../../static/college/new1.png);
			background-size: 100%;
			background-repeat: no-repeat;
		}

		.vip-right {
			padding: 20rpx;
			box-sizing: border-box;
			height: 214rpx;
			background: url(../../static/college/new2.png);
			background-size: 100%;
			background-repeat: no-repeat;

			.go {
				// width: 88rpx;
				// height: 56rpx;
				background: linear-gradient(180deg, #1677FF 0%, #19ACFF 100%);
				border-radius: 44rpx;
				margin-top: 85rpx;
				text-align: center;
				line-height: 56rpx;
			}
		}
	}

	
	.bulletin {
		.bulletin-title {
			font-size: 36rpx;
			font-family: PingFang;
			font-weight: bold;
			position: relative;
			padding-left: 20rpx;

			text {
				color: #FF8128;
			}

			&::after {
				content: "";
				height: 40rpx;
				border: 2px solid #FF8128;
				position: absolute;
				left: 0;
				top: 0;
				border-radius: 6px;
			}
		}

		.bulletin-content {
			width: 678rpx;
			margin: 34rpx auto 0;
			border-radius: 32rpx;
			background: #FFFFFF;
			padding: 40rpx;
			box-sizing: border-box;
		}
	}
</style>
